<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="d1">
    用户名:<input type="text" v-model="user.username"/><br/>
    密码:<input type="password" v-model="user.password"/><br/>
    <input type="button" value="get请求" @click="loginGet"/><br/>
    <input type="button" value="post请求" @click="loginPost"/><br/>
    <input type="button" value="put请求" @click="loginPut"/><br/>
    <input type="button" value="delete请求" @click="loginDelete"/><br/>
</div>
<script>
    new Vue({
        el: "#d1",
        data:{
            user:{
                id: 2,
                username: "",
                password: ""
            }
        },
        created(){
            this.login();
        },
        methods:{
            login(){
                axios.get('http://localhost:8080/users/f1').then(result => {
                    console.log(result.data);
                })
            },
            loginGet(){
                axios.get('http://localhost:8080/users/f2',{
                    params: this.user
                }).then(result => {
                    console.log(result.data);
                })
            },
            loginPost(){
                // 直接使用该方式,无任何返回数据
                // axios.post('http://localhost:8080/users/f2',{
                //     params: this.user
                // }).then(result => {
                //     console.log(result.data);
                // })
                // 使用post进行操作的时候
                // 其数据必须通过URLSearchParams对象进行封装
                let params = new URLSearchParams();
                params.append("id",this.user.id);
                params.append("username",this.user.username);
                params.append("password",this.user.password);
                axios.post('http://localhost:8080/users/f2',params).then(result => {
                    console.log(result.data);
                })
            },
            loginPut(){
                let params = new URLSearchParams();
                params.append("id",this.user.id);
                params.append("username",this.user.username);
                params.append("password",this.user.password);
                axios.put('http://localhost:8080/users/f2',params).then(result => {
                    console.log(result.data);
                })
            },loginDelete(){
                axios.delete('http://localhost:8080/users/f2',{
                    params: this.user
                }).then(result => {
                    console.log(result.data);
                })
            }
        }
    })
</script>
</body>
</html>